<template>
  <div class="input__container">
    <input :value="value" class="input" v-bind="$attrs" @input="handleInput" @change="handleInputChange" />
    <div class="input__suffix">
      <slot name="suffix"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Model, Prop } from 'vue-property-decorator';

@Component({
  name: 'Input',
})
export default class Input extends Vue {
  @Prop({ default: '' }) readonly value!: string;

  get placeholder() {
    console.log('placeholder', this.$attrs);
    return this.$attrs.placeholder;
  }

  handleInput(e: Event) {
    const target = e.target as HTMLInputElement;
    this.$emit('input', target.value);
  }

  handleInputChange(e: Event) {
    const target = e.target as HTMLInputElement;
    this.$emit('change', target.value);
  }
}
</script>

<style lang="scss" scoped>
.input {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  color: $font-color;
  padding: 0 10px;
  font-size: 14px;
  border-radius: 4px;
  outline: none;
  border: 1px solid #dcdfe6;
  display: inline-block;

  &::placeholder {
    color: #c8c8c8;
  }

  &__container {
    position: relative;
  }

  &__suffix {
    position: absolute;
    right: 0;
    line-height: 40px;
    top: 0;
  }
}
</style>
